﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js文字无限循环上下滚动-jq22.com</title>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
 body {
	background-color:#FFFFFF;
}
.out {
	overflow:hidden;
	height:21px;
	margin-top:50px;
	padding-left:20px;
}
</style>
</head>
<body>
<div class="out" id="roll">
    <div>第一屏滚动的文字</div>
    <div>第二屏滚动的文字</div>
    <div>第三屏滚动的文字</div>
    <div>第四屏滚动的文字</div>
    <div>第五屏滚动的文字</div>
    <div>第六屏滚动的文字</div>
    <div>第七屏滚动的文字</div>
    <div>第八屏滚动的文字</div>
</div>

<script>
var speed = 30;
var delay = 1000;
var height = 21;
var time;
window.onload = function() {
    var area = document.getElementById("roll");
    area.innerHTML += area.innerHTML;

    function scroll() {
        if (area.scrollTop % height == 0) {
            clearInterval(time);
            setTimeout(start, delay);
        } else {
            area.scrollTop++;
            if (area.scrollTop >= area.scrollHeight / 2) {
                area.scrollTop = 0;
            }
        }

    }

    function start() {
        time = setInterval(scroll, speed);
        area.scrollTop++;
    }
    setTimeout(start, delay);
}
</script>

</body>
</html>
